<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input size="small" placeholder="请输入查询关键字" clearable @change="getDataList" v-model="filters.keyword"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" icon="el-icon-search" @click="getDataList">查询</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle(null)">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" @selection-change="selsChange" v-loading="listLoading">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="50" header-align="center" align="center" fixed></el-table-column>
      <el-table-column prop="roleName" header-align="center" align="center" width="150" label="角色名称" fixed></el-table-column>
      <el-table-column prop="description" header-align="center" align="center" label="角色描述" width="200"></el-table-column>
      <el-table-column align="center" header-align="center" width="100" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.available==1" size="mini" type="success" hit>可用</el-tag>
          <el-tag v-else size="mini" type="danger" hit>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="角色创建者" width="200"></el-table-column>
      <el-table-column align="center" header-align="center" min-width="300" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)" round>编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteHandle(scope.row.id,scope.row.roleName)" round>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="total,sizes,prev,pager,next,jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="pageSizes"
                     :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--弹窗，新增/修改-->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './add-or-update'
  import API from '@/api';

  export default {
    name: "index",
    data(){
      return {
        addOrUpdateVisible:false,
        dataList:[],
        sels:[],
        filters:{
          keyword:""
        },

        //分页属性
        total:0,
        pageIndex:1,
        pageSize:this.CONSTANT.PAGE_SIZE,
        pageSizes:this.CONSTANT.PAGE_SIZES,

        listLoading:false,
      }

    },
    components:{
      AddOrUpdate
    },
    methods:{
      handleSizeChange(value){
        this.pageSize = value;
        this.getDataList();
      },
      handleCurrentChange(value){
        this.pageIndex = value;
        this.getDataList();
      },
      getDataList(){
        this.listLoading = true;
        let params = {
          page:this.pageIndex,
          limit:this.pageSize,
          roleName:this.filters.keyword
        };
        API.role.list(params).then(res=>{
          console.log(res.data);

          if(!res.data.code){
            this.dataList = res.data.page.list;
            console.log(res.data.page.list);
            this.total = res.data.page.totalCount;
          }else {
            this.$message.error("数据获取失败");
          }
          this.listLoading = false;
        }).catch(error=>{
          console.log(error);
          this.listLoading = false;
          this.$message.error("数据获取失败");
        })
      },
      addOrUpdateHandle(data){
        this.addOrUpdateVisible = true;
        this.$nextTick(()=>{
          this.$refs.addOrUpdate.init(data);
        });
      },
      deleteHandle(id,rolename){
        this.$confirm('此操作将永久删除这些配置信息，是否继续','警告',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          let ids = id.toString().split(",");
          API.role.removeBatch(ids).then((res)=>{
            console.log(res.data.code);
            if(!res.data.code){
              this.$message({
                message:"删除成功",
                type:"success"
              });
              this.getDataList();
            }else{
              this.$message.error(res.data.msg);
            }
          }).catch(error=>{
            console.error(error);
          })
        })
      },
      selsChange(sels){ //复选框记录
        this.sels = sels;
      },
      batchRemove(){  //批量删除
        let ids = this.sels.map(item=>item.id).toString().split(",");
        this.$confirm('确认删除选中记录吗？','提示',{type:'warning'}).then(()=>{
            API.role.removeBatch(ids).then(res=>{
              if(!res.data.code){
                this.$message({
                  message:"删除成功",
                  type:"success"
                });
                this.getDataList();
              }else {
                this.$message.error("删除失败，请重试");
              }
            }).catch(error=>{
              this.$message.error(error);
            });
        });
      },
    },
    activated(){
      this.getDataList();
    }
  }
</script>
